<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>歌单详情-CC音乐</title>
<script src="js/jquery.min.js"></script>



<!-- qq music style -->
<link rel="stylesheet" href="css/qqlayout01.css">
<link rel="stylesheet" href="css/qqplaylist01.css">
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css">

</head>
<body>
	<jsp:include page="headLink.jsp"></jsp:include>
	<jsp:include page="playit.jsp"></jsp:include>
	<!--整个页面-->
	<div class="lyear-layout-container">
		<!--导航栏-->
		<header class="lyear-layout-header">
			<!--保持居中的秘密不可更改！！！-->
			<div class="header-container">
				<div class="header-top">
					<a href="homePage.jsp" class="logo"></a>
					<nav class="header-nav">
						<ul>
							<li><a href="homePage.jsp" target="">音乐馆</a></li>
							<li><a href="personal.jsp" class="header-nav__cur">我的音乐</a></li>
						</ul>
					</nav>
					<div class="header-search">
						<input type="text" id="searchmusic" class="szh_text" placeholder="搜索" onkeypress="if(event.keyCode==13)searchMusic()">
						<!--<div class="btn"><i class="icon-sprite"></i></div>-->
						<div class="result">
							<a href="#" class="result-item"> <span class="rank">1</span>
								<span class="title">默</span> <span class="num">3.4万</span>
							</a> <a href="#" class="result-item"> <span class="rank">2</span>
								<span class="title">侧田</span> <span class="num">3.4万</span>
							</a> <a href="#" class="result-item"> <span class="rank">3</span>
								<span class="title">让我留在你身边</span> <span class="num">3.4万</span>
							</a> <a href="#" class="result-item"> <span class="rank">4</span>
								<span class="title">皮皮虾我们走</span> <span class="num">3.4万</span>
							</a> <a href="#" class="result-item"> <span class="rank">5</span>
								<span class="title">欢乐好声音</span> <span class="num">3.4万</span>
							</a>
							<div class="history">
								<span>搜索历史</span> <i class="icon-sprite"></i>
							</div>
						</div>
					</div>

					<ul class="topbar-right login-mod">
						<li class="dropdown dropdown-profile"><a
							href="javascript:void(0)" data-toggle="dropdown"> <img
								class="img-avatar img-avatar-48 m-r-10"
								src="images/headPhoto1.jpg" alt="灰质"> <span>${sessionScope.user.uname}<span
									class="caret"></span></span>
						</a>
							<ul class="dropdown-menu dropdown-menu-right">
								<li><a href="userInfo.jsp"><i class="mdi mdi-account"></i>
										个人信息</a></li>
								<li><a href="#" data-toggle="modal" data-target="#updatepwd"><i
										class="mdi mdi-lock-outline"></i> 修改密码</a></li>
								<li class="divider"></li>
								<li><a href="lyear_pages_login.html"><i
										class="mdi mdi-logout-variant"></i> 退出登录</a></li>
							</ul></li>
					</ul>
				</div>
			</div>
		</header>
		<!--页面主要内容-->
		<div class="container-fluid">
			<div class="main main--profile">

				<div class="mod_data" itemscope=""
					itemtype="http://schema.org/MusicRecording">
					<!-- 自建歌单用a标签 -->

					<span class="data__cover" id="logo" style="display: none;">

					</span> <a href="javascript:;" class="data__cover js_edit" id="edit_logo"
						data-target="popup_upload_cover"
						onclick="resetImg();statistics.pgvClickStat('y_new.gedan.header.edit_logo');"
						style=""> <img src="images/def-pcorver.png" alt="Coffee Music"
						class="data__photo" id="list_corver"> <i
						class="data__cover_edit sprite"></i>
					</a>
					<div class="data__cont">
						<div class="data__name js_box" data-type="p_title">
							<h1 class="data__name_txt" title="Slee" id="p_name_show">Coffee
								Music</h1>
							<a href="javascript:;" class="btn_edit sprite js_edit" style=""><i
								class="icon_txt">编辑</i></a>
							<div class="mod_form_txt js_edit_box" style="display: none;">
								<input type="text" value="Slee" class="form_txt__input"
									id="p_name"><span class="form_txt__tips"
									id="name_leftnum" style="color: rgb(153, 153, 153);">18</span>
							</div>
						</div>
						<div class="data__singer">
							<p id="desc" style="overflow: hidden; text-overflow: ellipsis"></p>
						</div>
						<ul class="data__info">
							<li class="data_info__item js_box" data-type="p_tags"
								style="display:;">

								<div class="data_tag_edit js_edit_box" style="display: none;">
									<div class="mod_form_txt">
										<div class="tag_edit_box" id="choosebox2"></div>
										<span class="form_txt__tips" id="leaveNum">3</span>
									</div>
								</div>
							</li>
							<!--li class="data_info__item">创建时间：2013-12-09</li-->
							<li class="data_info__item" id="play_count"></li>
						</ul>

						<div class="data__actions" role="toolbar"></div>
					</div>
				</div>

				<div class="detail_layout">
					<div class="detail_layout__main js_main">

						<div class="mod_songlist">
							<table id="playlist" class="display table table-condensed"
								style="width: 100%">
								<thead>
									<tr>
										<th>#</th>
										<th>歌曲名</th>
										<th>播放</th>
										<th>歌手</th>
									</tr>
								</thead>
								<tbody>

								</tbody>
								<tfoot>
									<tr>
										<th>#</th>
										<th>歌曲名</th>
										<th>播放</th>
										<th>歌手</th>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 修改密码模态框   wwb -->
	<div class="modal fade" id="updatepwd" tabindex="-1" role="dialog"
		aria-labelledby="updatepwd">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">密码修改</h4>
				</div>
				<div class="modal-body">
					<form>
						<div class="form-group">
							<label for="user-name" class="control-label">原密码：</label> <input
								type="password" class="form-control" id="updatepwd1"
								placeholder="请输旧密码...">
						</div>

						<div class="form-group">
							<label for="user-pwd" class="control-label">新密码：</label> <input
								type="password" class="form-control" id="updatepwd2"
								placeholder="请输新密码...">
						</div>

						<div class="form-group">
							<label for="user-pwd" class="control-label">再次新密码：</label> <input
								type="password" class="form-control" id="updatepwd3"
								placeholder="请再次输入新密码...">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="btn_update">确认修改</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript"
	src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript"
	src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"
	src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="js/lightyear.js"></script>
<script src="js/homePage.js" charset="utf-8"></script>
<!-- 排行榜/热门歌单音乐的加载 -->
<script type="text/javascript">
	$(document)
			.ready(
					function() {
						var type = "${param.type}";
						var scode = "${param.scode}";
						var body = $("tbody");
						var htmlele = "";
						if (type == "top") {
							$
									.ajax({
										"url" : "http://192.168.11.240:3000/top/list",
										"data" : {
											"idx" : scode
										},
										"success" : function(data) {
											var tracks = data.playlist.tracks;
											$("#list_corver").attr(
													"src",
													data.playlist.coverImgUrl
															+ "?param?250y250");
											$("#p_name_show").text(
													data.playlist.name);
											$("#desc").text(
													data.playlist.description);
											$("#play_count")
													.text(
															"播放量："
																	+ data.playlist.playCount);
											for (var i = 0; i < tracks.length; i++) {
												htmlele = htmlele
														+ "<tr scope='row'><td>"
														+ (i + 1)
														+ "</td><td>"
														+ (tracks[i].name)
														+ "</td><td><i class='mdi mdi-play playit' id="
														+ (tracks[i].id)
														+ " style='font-size:20px;line-height:100%;cursor:pointer;color:lightgreen'></i></td><td>"
														+ (tracks[i].ar[0].name)
														+ "</td></tr>";
											}
											$(body).html(htmlele);
											$('#playlist').DataTable();
										}
									});
						} else if (type == "ulist") {
							$
									.ajax({
										"url" : "http://192.168.11.240:3000/playlist/detail",
										"data" : {
											"id" : scode
										},
										"success" : function(data) {
											$("#list_corver").attr(
													"src",
													data.playlist.coverImgUrl
															+ "?param?250y250");
											$("#p_name_show").text(
													data.playlist.name);
											$("#desc").text(
													data.playlist.description);
											$("#play_count")
													.text(
															"播放量："
																	+ data.playlist.playCount);
											var songs = getSongsDetailInfo(data.playlist.trackIds);
											var songsLth = songs.songs.length;
											for (var i = 0; i < songsLth; i++) {
												var tsong = songs.songs[i];
												htmlele += "<tr scope='row'><td>"
														+ (i + 1)
														+ "</td><td>"
														+ (tsong.name)
														+ "</td><td><i class='mdi mdi-play playit' id="
														+ (tsong.id)
														+ " style='font-size:20px;line-height:100%;cursor:pointer;color:lightgreen'></i></td><td>"
														+ (tsong.ar[0].name)
														+ "</td></tr>";
											}
											$(body).html(htmlele);
											$('#playlist').DataTable();
										}

									});
						}

					});
</script>
<!-- cyf用户在输入框搜索音乐的方法 -->
<script type="text/javascript">
	function searchMusic() {
		//console.log($("#searchmusic").val());
		window.open("searchListTest.jsp?search="+$("#searchmusic").val());
	}


</script>
<!-- cyf用户在输入框搜索音乐的方法结束 -->
<script type="text/javascript">
	<!-- 修改密码功能，校验输入的旧密码是否与session中的密码相同  --wwb -->
		$(function(){
			$("#updatepwd1").blur(function(){
				var upwd="";
				var flag=${sessionScope.user!=null};
				if(flag){
					$("#updatepwd2").removeAttr("readonly");
					$("#updatepwd3").removeAttr("readonly");
					var oldpwd=$("#updatepwd1").val();
					var upwd=${sessionScope.user.pwd}
					console.log(upwd);
					if(oldpwd!=upwd){
						layui
						.use(
								[
										'layer',
										'form' ],
								function() {
									var layer = layui.layer
									layer
											.alert(
													"密码错误",
													{
														icon : 2,
														skin : 'layer-ext-moon'
													})
								})
								$("#updatepwd2").attr("readonly",true);
								$("#updatepwd3").attr("readonly",true);
						
					}
				}								
			});			
			// 修改密码功能，再次输入密码与新密码比较   wwb 				
			$("#updatepwd3").blur(function(){
				$("#btn_update").attr("disabled", false);
				var newpwd=$("#updatepwd2").val();
				var renewpwd=$("#updatepwd3").val();
				if(renewpwd!=newpwd){
					layui
					.use(
							[
									'layer',
									'form' ],
							function() {
								var layer = layui.layer
								layer
										.alert(
												"密码不一致",
												{
													icon : 2,
													skin : 'layer-ext-moon'
												})
							})
							$("#btn_update").attr("disabled", true); 
				}
				
			});
			
			//修改密码功能，确认修改按钮事件   wwb
			$("#btn_update").click(function(){
				var oldpwd=$("#updatepwd1").val();
				var newpwd=$("#updatepwd2").val();
				var renewpwd=$("#updatepwd3").val();
				var uid=${sessionScope.user.uid}
				//console.log(uid);
				$.ajax({
					type:"post",
					url:"../ZhuCeServlet?op=updatePwd",
					data:{
						"oldpwd":oldpwd,
						"newpwd":newpwd,
						"uid":uid
					},
					success:function(data){
						if(data.msg=="修改成功"){
							layui
							.use(
									[
											'layer',
											'form' ],
									function() {
										var layer = layui.layer;
										layer
												.alert(
														"修改成功，请重新登入",
														{
															icon : 2,
															skin : 'layer-ext-moon',
															time : 5000
														})
													
									})
									window.location.href="../loginOutServlet";
						}
					}
					
				});
			});
			
		});
	</script>
</html>